<template>
	<view>
		<button @tap="click">按钮</button>
		<view :class="[color2]"></view>
		<view>
			<!-- <button @tap="click">按钮</button> -->
			<view :class="['zero', 'bg2']">
				<!-- 搜索 -->
				<view class="white">
					<view class="search common">
						<!-- 搜索 -->
						<u-search
							action-text="取消"
							placeholder-color="#bbb"
							placeholder="520元红包抢先领"
							v-model="keyword"
							:clearabled="true"
							show-action
							shape="square"
							@search="search"
							:value="keyword"
							@input="inp"
						></u-search>
						<view class="postxt" @tap="none"></view>
					</view>
					<view class="" v-if="isShowsearch">
						<view class="history">
							历史记录
							<u-icon name="trash-fill" color="#999" size="20"></u-icon>
						</view>
						<view class="hot">
							<view class="">热门搜索</view>
							<view class="txt2">
								<text class="red text">520元礼包抢先领</text>
								<text class="text">520单鞋</text>
								<text class="text">墨镜</text>
								<text class="text">夏凉被</text>
								<text class="text">新品上市</text>
								<text class="text">日式</text>
								<text class="text">母亲节</text>
							</view>
						</view>
					</view>

					<view class="posblack" v-if="!isShowsearch">
						<view class="item" v-for="(item, index) in list" :key="index">
							<text>{{ item }}</text>
						</view>
					</view>
				</view>
				<view class="nomore">没有更多了</view>
			</view>
		</view>
	</view>
</template>

<script>
import { searchApi, helperApi } from '../../utils/api.js';
let timer = null;
export default {
	data() {
		return {
			color2: '',
			tranbg: 'black',
			keyword: '',
			color: 'trans',
			defaultKeyword: '',
			historyKeywordList: [],
			hotKeywordList: [],

			isShowsearch: false,
			list: []
		};
	},
	methods: {
		inp() {
			console.log(this.keyword);
			// 先取消上一次 等等延迟后再请求
			clearTimeout(timer);
			timer = setTimeout(() => {
				this.getSearch();
			}, 500);
		},
		async getSearch() {
			let token = uni.getStorageSync('token');
			let res = await helperApi(token, this.keyword);
			console.log(res);
			this.list = res.data;
		},
		click() {
			console.log('click');
			this.color = 'zero';
			this.color2 = 'black2';
		},
		none() {
			console.log(1);
			console.log('none');
			this.color = 'trans';
			this.color2 = 'white2';
		}
	},
	onShow() {
		this.getSearch();
	},
	async onLoad() {
		let token = uni.getStorageSync('token');
		console.log(token);
		let searchApires = await searchApi(token);
		console.log('搜索', searchApires);
		let { defaultKeyword, historyKeywordList, hotKeywordList } = searchApires.data;
		this.defaultKeyword = defaultKeyword;
		this.historyKeywordList = historyKeywordList;
		this.hotKeywordList = hotKeywordList;
	}
};
</script>

<style lang="scss">
.nomore {
	padding: 30rpx 0;
	border: 0;
	font-size: 34rpx;
	color: #777;
	text-align: center;
}
.posblack {
	background-color: #ffffff;
	.item {
		display: flex;
		box-sizing: border-box;
		width: 90%;
		padding: 20rpx 0px;
		margin: 0 32rpx;
		overflow: hidden;
		color: #323233;
		font-size: 28rpx;
		line-height: 48rpx;
		background-color: #fff;
		border-bottom: 2rpx solid #eee;
		box-sizing: border-box;
	}
	.item:last-child {
		border-bottom: none;
	}
}

.black2 {
	background-color: black;
	opacity: 0.8;
	transform: opacity 1s;
	position: absolute;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	top: 0;
}

.white2 {
	background-color: black;
	opacity: 0;
	transform: opacity 1s;
	position: absolute;
	z-index: 0;
	width: 100vw;
	height: 100vh;
	top: 0;
}

.postxt {
	// background-color: #ccc;
	width: 90rpx;
	height: 70rpx;
	position: absolute;
	right: 30rpx;
	top: 30rpx;
}

.bg2 {
	width: 100vw;
	height: 100vh;
	background-color: #efefef;
	position: absolute;
	top: 0;
}

.zero {
	transform: translateX(0vw);
	transition: transform 0.8s ease-out;
	z-index: 1;
	position: absolute;
}

.trans {
	transform: translateX(100vw);
	transition: transform 0.8s ease-out;
	z-index: 1;
	position: absolute;
}

//

.white {
	background-color: #fff;

	.search {
		margin: 0rpx 20rpx 0;
		padding: 26rpx 0;
		position: relative;
		z-index: 1;
	}

	.history {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 44rpx 30rpx 24rpx;
		align-items: center;
		margin-bottom: 30rpx;
	}
}

.hot {
	background-color: #fff;
	padding: 20rpx 20rpx 50rpx;
	box-sizing: border-box;

	.txt2 {
		font-size: 30rpx;
		width: 100%;

		.red {
			color: #f40;
			border: 1px solid #f40;
		}

		text {
			border-radius: 8rpx;
			border: 1px solid #ccc;
			padding: 4rpx 10rpx;
			// height: auto !important;
			color: #aaa;
			margin-right: 20rpx;
			display: inline-block;
			margin-top: 20rpx;
		}
	}
}
</style>
